iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 2
2

工欲善其事,必先利其器,來準備一下你的工具吧

剛開始學習的時候,除了需要瞭解最重要的程式語法外,還必須知道一些工具,讓你啓程。

首先最最最重要的就是編輯器了!!!

編輯器

https://ithelp.ithome.com.tw/upload/images/20181017/20111959riTF8qr4IY.png

我使用的編輯器是 Atom,它有豐富的套件可以做個人化的設定,套件安裝也很方便。只要到 Setting -> Install 搜尋你要的套件,按下 Install 後,再到 Packages 查閱使用方式及進行一些個人化設定即可使用。

https://ithelp.ithome.com.tw/upload/images/20181017/20111959B1s0Tq1vpw.png

介紹五個我喜歡的套件,其他的你可以再依照喜好慢慢發掘。

1.emmet :自動補齊程式碼。emmet 有許多快捷鍵供使用,例如撰寫 HTML 檔案時,只要打上 ! 再按下 tab,即可得到一個非常基礎的 HTML 格式了。

https://ithelp.ithome.com.tw/upload/images/20181017/20111959XXvvCdPBXN.png

  1. atom-beautify:排版你的程式碼。來個極端例子,左邊是經過一陣程式碼亂鬥後,排版很難看,不利查找的樣子,需要手動排列又耗時。這時利用 atom-beautify 工具,就可以一鍵排成右邊漂亮的樣子。縮排的空格數,也可以依照個人喜好調整哦。

https://ithelp.ithome.com.tw/upload/images/20181017/2011195974kaXt9LWk.png

  1. atom-live-server :同步在瀏覽器上更新程式碼。當你在瀏覽器編輯按下儲存的同時,你的瀏覽器也同步更新至最新修改了!不需要再按 F5 了。

  2. color-picker :顏色選取。在練習階段,沒有設計稿,在配色上,沒辦法準確的講出色號,但心裡知道我想要比現在的顏色再淺一點,再透明一點,這時候 color-picker 就非常好用了,可以直接調整後套用。在練習階段,每個成品如果美一點,心情也會好一點呢:)

https://ithelp.ithome.com.tw/upload/images/20181017/20111959GZumrANFX1.png

5.double-tag & indent-guide-improved:標註出對應的標籤。在寫了很多階層的程式碼後,double-tag & indent-guide-improved 可以幫你標出相對應的標籤,大大增進在程式碼查找時的效率。

https://ithelp.ithome.com.tw/upload/images/20181017/20111959zreKVz103P.png

編輯器的部分,目前我只使用過 Atom,沒辦法有太多與其他編輯器比較的心得,不過就新手來說,我覺得它是好上手的,目前我還是把重心放在程式碼的學習上,後續我可能也會考慮試試看別人推薦的。一開始如果不知道要安裝哪一個編輯器,就是以別人推薦爲主就好。當你開啓使用時,它有善待新手,沒有讓你覺得自己很笨,那麼以第一個編輯器來說就是合格的了。

輔助工具

接下來是輔助工具的部分。

  1. 網頁測量工具 - Page Ruler

https://ithelp.ithome.com.tw/upload/images/20181017/20111959ewOGXD43bL.png

在練習階段沒有設計稿,有時只有樣本圖片,我會先把它以 100% 的方式呈現在瀏覽器上,再利用 chrome 工具中的 Page Ruler 量取元素大小。使用方式非常簡單,只要打開它拉取你要測量的範圍,就可以即時量取了。

  1. 網頁顏色量取工具 - ColorPick Eyedropper

https://ithelp.ithome.com.tw/upload/images/20181017/20111959FWBvuUbqJM.png

顏色的部分也一樣,利用 chrome 工具中的 ColorPick Eyedropper,在畫面上的顏色都可以直接量取。
不過如果你現在要練習切的樣板是一個現成的網站,那你可以直接打開檢查工具,就可以知道大小及顏色了,不過不能偷看別人寫好的程式碼,否則就失去實作練習的意義了!

  1. 假圖片 

https://ithelp.ithome.com.tw/upload/images/20181017/20111959ygeAnWb0EP.png

在練習切版時,有時需要一些特定大小的圖片來練習排版,這時可以直接輸入 <img src="https://fakeimg.pl/440x320/"> ,其中的 440x320 可以依照需求自訂

  1. CodePen

https://ithelp.ithome.com.tw/upload/images/20181017/201119595YHAx4ICZN.png 

剛學到一個新的語法或標籤特性,需要嘗試一下時,就很適合使用 CodePen 開啓一個練習,練習後可以保存起來,當日後你使用到同一個語法或特性時,就可以當做自己的字典,查詢一下當初是如何下語法的。

5.HackMD

https://ithelp.ithome.com.tw/upload/images/20181017/20111959g5k4f9kWIA.png

學習過程你總有許多需要筆記的事情,HackMD 就是一個很好寫自己筆記的網站,記得爲每篇筆記下分類 tag ,方便日後查詢。

準備好工具,就可以啓程囉/images/emoticon/emoticon42.gif


上一篇
Day1 如何開始前端之路
下一篇
Day3 工具都準備好了,到底怎麽開始切版呢?
系列文
前端之 " wow~原來是這樣啊 "30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
Chris
iT邦新手 3 級 ‧ 2018-10-20 22:57:17

標題要用 # ,引用別人的內文,才是用 >

Lai iT邦新手 5 級 ‧ 2018-10-21 09:15:26 檢舉

好哦! 等等來改一下 /images/emoticon/emoticon41.gif

0
Chris
iT邦新手 3 級 ‧ 2018-10-20 22:57:18

(重複留言了)

Lai iT邦新手 5 級 ‧ 2018-10-21 10:13:35 檢舉

那就再回你一個 /images/emoticon/emoticon42.gif

我要留言

立即登入留言